<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>商品列表</caption>
    <tr>
        <th>商品名</th>
        <th>价格</th>
        <th>库存</th>
    </tr>
</table>
<script>
    //定义一个空的Person
    function Person(){}
    //实例化Person对象
    let p1 = new Person();
    //动态添加属性
    p1.name="刘德华";
    p1.age =10;
    /*添加run方法*/
    p1.run=function () {
        console.log(this.name+":"+this.age);
    }
    p1.run();/*调用run方法*/

    //定义一个自带属性和方法的对象
    function Car(){
        this.name="宝马"
        this.peice=500;
        this.run =function () {
            console.log(this.name+":"+this.peice);
        }
    }
    let p2 = new Car();
    p2.run();

    //直接实例化对象的方式\
    let p3={};
    p3.name="吊毛";
    p3.age=66;
    p3.run =function () {
        console.log(this.name+":"+this.age)
    }
    p3.run();

    //直接实例化带属性和方法的对象
    let p4 ={
        name:"张三",
        age:18,
        run:function(){
            console.log(this.name+":"+this.age)
        }
    }
    p4.run();

    let arr = [{title:"格力空调",price:5000,num:500},
                {title:"阿三空调",price:5000,num:500},
                {title:"二手市场",price:5000,num:500},
                {title:"自发空调",price:5000,num:500}]
    let table =document.querySelector("table");
    //遍历数组
    for (let item of arr){
        let tr=document.createElement("tr");
        let titleTd=document.createElement("td");
        let priceTd=document.createElement("td");
        let numTd=document.createElement("td");
        //给td添加显示的商品信息
        titleTd.innerText=item.title;
        priceTd.innerText=item.price;
        numTd.innerText=item.num;
        tr.append(titleTd,priceTd,numTd);
        table.append(tr)
    }

</script>
</body>
</html>